<!-- 导出题库 选择导出项弹框 -->
<template>
  <el-dialog
    title="选择导出项"
    :visible="open"
    top="40vh"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    custom-class="export_topic_container"
    @close="cancel()"
  >
    <div>
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选
      </el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedRadios"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          :disabled="radio == '题干'"
          v-for="radio in radios"
          :label="radio"
          :key="radio"
        >{{ radio }}
        </el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-preventReClick @click="cancel">取 消</el-button>
      <el-button v-preventReClick type="primary" @click="preview">
        预 览
      </el-button>
      <el-button v-preventReClick type="primary" @click="submitForm">
        确 定
      </el-button>
    </div>
    <!-- 预览弹框 -->
    <topicExportPreview
      @topicExportPreviewReturn="cancel"
      :open.sync="topicExportPreviewOpen"
      :topicIds="topicIds"
      :topics="topics"
      :indexId="indexId"
      :ancestorsName="ancestorsName"
      :checkedRadios="checkedRadios"
      :exportData="exportData"
    ></topicExportPreview>
  </el-dialog>
</template>

<script>
import topicExportPreview from './topicExportPreview.vue'

const cityOptions = [
  '题干',
  '题型',
  '难度',
  '答案',
  '解析',
  '选项选择比例',
  '试题数据'
]
export default {
  components: { topicExportPreview },
  props: {
    open: Boolean,
    topicIds: [String, Number],
    topics: [Array],
    indexId: [String, Number],
    ancestorsName: String
  },
  data() {
    return {
      exportData: {},
      checkAll: true,
      checkedRadios: [
        '题干',
        '题型',
        '难度',
        '答案',
        '解析',
        '选项选择比例',
        '试题数据'
      ],
      radios: cityOptions,
      isIndeterminate: false,
      topicExportPreviewOpen: false
    }
  },
  watch: {
    open(e) {
      if (e) {
      }
    }
  },
  methods: {
    preview() {
      console.log('preview', this.topics)
      this.topicExportPreviewOpen = true
      this.exportData = {
        indexId: this.indexId,
        topicIds: this.topicIds,
        questionType: this.checkedRadios.includes('题型'),
        difficulty: this.checkedRadios.includes('难度'),
        answer: this.checkedRadios.includes('答案'),
        analysis: this.checkedRadios.includes('解析'),
        optionPercentage: this.checkedRadios.includes('选项选择比例'),
        topicData: this.checkedRadios.includes('试题数据')
      }
    },
    handleCheckAllChange(val) {
      this.checkedRadios = val ? cityOptions : ['题干']
      this.isIndeterminate = !val
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.radios.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.radios.length
    },

    // 取消按钮
    cancel() {
      console.log('取消按钮')
      this.$emit('update:open', false)
    },
    /** 提交按钮 */
    submitForm: function() {
      console.log(this.indexId, this.topicIds, this.ancestorsName)

      this.download(
        '/exam/teacher/topic/exportWord',
        {
          indexId: this.indexId,
          topicIds: this.topicIds,
          questionType: this.checkedRadios.includes('题型'),
          difficulty: this.checkedRadios.includes('难度'),
          answer: this.checkedRadios.includes('答案'),
          analysis: this.checkedRadios.includes('解析'),
          optionPercentage: this.checkedRadios.includes('选项选择比例'),
          topicData: this.checkedRadios.includes('试题数据')
        },
        `《${this.ancestorsName}》题库.docx`
      )
      this.$modal.msgSuccess('导出成功')
      this.$emit('update:open', false)
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
::v-deep .export_topic_container {
  margin-top: 30vh !important;
}
</style>
